সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>সিএসএস বাটন</h2>
<button>ডিফল্ট বাটন</button>
<a href="#" class="button">লিংক বাটন</a>
<button class="button">বাটন</button>
<input type="button" class="button" value="ইনপুট বাটন">
</body>
</html>
বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রোপারটি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #4CAF50;} /* Green */
.button3 {background-color: #008CBA;} /* Blue */
.button4 {background-color: #f44336;} /* Red */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<h2>সিএসএস বাটন</h2>
<p> background-color প্রোপার্টির মাধ্যমে বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়।</p>
<button class="button">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>বাটন সাইজ</h2>
<p> font-size প্রোপার্টি ব্যবহারের মাধ্যমে বাটনের ফন্ট সাইজ পরিবর্তন করা হয়।</p>
<button class="button button1">১০ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল</button>
<button class="button button3">১৬ পিক্সেল</button>
<button class="button button4">২০ পিক্সেল</button>
<button class="button button5">২৪ পিক্সেল</button>
</body>
</html>
বাটনের পেডিং পরিবর্তন করতে padding প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 16px;}
.button5 {padding: 32px 16px;}
</style>
</head>
<body>
<h2>বাটন সাইজ</h2>
<p>padding প্রোপার্টির মাধ্যমে বাটনের পেডিং পরিবর্তন করা হয়।</p>
<button class="button button1">১০ পিক্সেল ২৪ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল ২৮ পিক্সেল</button>
<button class="button button3">১৪ পিক্সেল ৪০ পিক্সেল</button>
<button class="button button4">১৬ পিক্সেল</button>
<button class="button button5">৩২ পিক্সেল ১৬ পিক্সেল</button>
</body>
</html>
বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>গোলাকৃতি বাটন</h2>
<p>বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করা হয়েছে।</p>
<button class="button button1">২ পিক্সেল</button>
<button class="button button2">৪ পিক্সেল</button>
<button class="button button3">৮ পিক্সেল</button>
<button class="button button4">১২ পিক্সেল</button>
<button class="button button5">৫০%</button>
</body>
</html>
বাটনে বর্ডার কালার যুক্ত করতে border প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 3px solid teal;
}
.button2 {
background-color: white;
color: black;
border: 3px solid #4CAF50;
}
.button3 {
background-color: white;
color: black;
border: 3px solid #008CBA;
}
.button4 {
background-color: white;
color: black;
border: 3px solid #f44336;
}
.button5 {
background-color: white;
color: black;
border: 3px solid #555555;
}
</style>
</head>
<body>
<h2>কালার বাটন বর্ডার</h2>
<p>বাটনে বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করাহয়েছে।</p>
<button class="button button1">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
আপনি বাটনে হোবার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করুন।
পরামর্শঃ হোভার এর গতি নিয়ন্ত্রন করার জন্য transition-duration প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid teal;
}
.button1:hover {
background-color: teal;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button2:hover {
background-color: #4CAF50;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button3:hover {
background-color: #008CBA;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button4:hover {background-color: #f44336;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>হোভারেবল বাটন</h2>
<p>মাউস নড়াচড়া করানোর সাথে সাথে বাটনের স্টাইল পরিবর্তনের জন্য hover selector ব্যবহার করা হয়েছে।</p>
<p><strong>টিপস:</strong>"hover" এর দ্রুত প্রতিক্রিয়া নির্ধারণ করার জন্য transition-duration প্রোপার্টি ব্যবহার করা হয়েছে।</p>
<button class="button button1">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
বাটনে শ্যাডো যুক্ত করার জন্য box-shadowপ্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid teal;
}
.button1:hover {
background-color: teal;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button2:hover {
background-color: #4CAF50;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button3:hover {
background-color: #008CBA;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button4:hover {background-color: #f44336;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<h2>স্যাডো বাটন</h2>
<p>বাটনকে স্যাডো করার জন্য box-shadow প্রোপের্টি ব্যবহার কর হয়েছে।</p>
<button class="button button1">স্যাডো বাটন</button>
<button class="button button2">হোভারের উপর শ্যাডো</button>
</body>
</html>
একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করুন।
পরামর্শঃ যখন আপনি বাটনের উপর মাউস নিয়ে যাবেন তখন একটি "no parking sign" দেখানোর জন্য cursor প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>
<h2>ডিজেবল বাটন</h2>
<p>opacity প্রোপার্টি ব্যবহারের মাধ্যমে বাটনে কিছু টান্সপারেন্সি যুক্ত করা হয় (এটা বাঁটনকে ডিজেবল বানায়)</p>
<button class="button button1">সাধারণ বাটন</button>
<button class="button button2">ডিজেবল বাটন</button>
</body>
</html>
ডিফল্ট ভাবে একটি বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1745
বাটন গুলো থেকে মার্জিন বাদ দিয়ে float:left প্রোপার্টি যুক্ত করে বাটনের গ্রুপ তৈরি করা যায়ঃ
kt_satt_skill_example_id=1746
বর্ডার সহ বাটন গ্রুপ তৈরি করতে বাটন গ্রুপের সাথে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1748
একটি বাটনে আপনি বিভিন্ন ধরনের এনিমেশন যুক্ত করতে পারবেন। তার মধ্যে আমরা নিম্নের বাটনের ভিতর হোবার ইফেক্টে এরো (arrow ) চিহ্ন যুক্ত করবোঃ
kt_satt_skill_example_id=1749
এই উদাহরনে আমরা বাটন ক্লিকে একটি রিপল("ripple") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1751
এই উদাহরনে আমরা বাটন ক্লিকে একটি প্রেস("pressed") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1752
Read more
or
